<template>
    <el-dialog 
      v-model="dialogVisible" 
      title="题目详情" 
      width="50%"
      :before-close="handleClose"
    >
      <div v-if="question" class="question-content">
        {{ question.title || question.shortTitle || '无题干信息' }}
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </template>
  
  <script lang="ts" setup>
  import { defineProps, defineEmits, computed } from 'vue'
  import type { PropType } from 'vue'
  import type { QuestionItem } from '@/api/juanti' // 导入类型
  
  const props = defineProps({
    visible: { type: Boolean, required: true },
    question: { 
      type: Object as PropType<QuestionItem | null>, 
      default: null 
    }
  })
  
  const emit = defineEmits(['update:visible'])
  
  // 计算属性控制对话框显示
  const dialogVisible = computed({
    get: () => props.visible,
    set: (value) => emit('update:visible', value)
  })
  
  // 关闭对话框处理
  const handleClose = () => {
    dialogVisible.value = false
  }
  </script>
  
  <style scoped>
  .question-content {
    font-size: 16px;
    line-height: 1.6;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 4px;
    white-space: pre-wrap;
  }
  </style>